<template>
  <div class="about">
    <h3>关于我们</h3>
    <div class="about-content">
      <div class="about-section">
        <h4>项目介绍</h4>
        <p>这是一个基于Vue3 + TypeScript + Vite构建的现代化前端项目，用于学习和演示Vue3的各种特性。</p>
      </div>
      
      <div class="about-section">
        <h4>技术栈</h4>
        <div class="tech-stack">
          <span class="tech-item">Vue 3</span>
          <span class="tech-item">TypeScript</span>
          <span class="tech-item">Vite</span>
          <span class="tech-item">Vue Router</span>
          <span class="tech-item">Composition API</span>
        </div>
      </div>
      
      <div class="about-section">
        <h4>联系方式</h4>
        <div class="contact-info">
          <p>📧 Email: example@email.com</p>
          <p>🌐 Website: www.example.com</p>
          <p>📱 Phone: +86 123-4567-8900</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="About">
</script>

<style scoped>
.about {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h3 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2em;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-section {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.about-section h4 {
  color: #667eea;
  margin-bottom: 15px;
  font-size: 1.3em;
  border-bottom: 2px solid #667eea;
  padding-bottom: 8px;
}

.about-section p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-item {
  background: #667eea;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: bold;
}

.contact-info p {
  margin: 10px 0;
  font-size: 1.1em;
}
</style>
